<template>
  <div class="home-invest-finan">
    <div class="title">
      <span class="title-first">投资理财</span>
      <ui-button class="only-btn-arrow">
        <img src="@/assets/image/home/arrow.png" alt="" />
      </ui-button>
    </div>
    <ui-row>
      <ui-col :span="8" v-for="(item, index) in finanList" :key="index" :class="{ class_border: index == 1 ? true : false }">
        <div class="finan-title">{{ item.title }}</div>
        <ul class="finan-amount">
          <li>
            <p class="finan-item1">{{ item.yield }}</p>
            <span class="finan-item3">预期年化收益</span>
          </li>
          <li>
            <p class="finan-item2">{{ item.amount }}</p>
            <span class="finan-item3">起购金额</span>
          </li>
          <li>
            <p class="finan-item2">{{ item.timeLimit }}</p>
            <span class="finan-item3">投资期限</span>
          </li>
        </ul>
        <div class="finan-button"><ui-button type="primary">立即抢购</ui-button></div>
      </ui-col>
    </ui-row>
  </div>
</template>

<script>
import systemApi from '@/api/system';
export default {
  data() {
    return {
      finanList: [],
    };
  },
  created() {
    systemApi.finanViewQry({}).then((res) => {
      // 模拟接口
      this.finanList = res.list || [];
    });
  },
};
</script>

<style lang="scss">
.home-invest-finan {
  background: $color-bg-default;
  border-radius: 8px;
  box-shadow: 0px 1px 10px 0px rgba(0, 21, 41, 0.07);
  height: 250px;
  .title {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    margin-left: 30px;
    margin-right: 30px;
    .title-first {
      font-size: $s16;
      text-align: left;
      color: $color-text-main;
    }
  }
  .finan-title {
    width: 240px;
    line-height: 30px;
    background: #e1eaff;
    border-radius: 20px;
    margin: 15px auto;
    text-align: center;
    cursor: pointer;
  }
  .finan-button {
    margin: auto;
    text-align: center;
  }
  .finan-amount {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 15px;
    text-align: center;
    cursor: pointer;
    & > li {
      padding: 0 7px;
      .finan-item1 {
        font-size: 30px;
        font-weight: 500;
        color: #e50000;
        line-height: 42px;
      }
      .finan-item2 {
        font-size: $s18;
        font-weight: 500;
        color: $color-text-main;
        line-height: 30px;
      }
      .finan-item3 {
        font-size: $s12;
        color: $color-text-sub;
        line-height: 17px;
      }
    }
  }
  .ui-button--primary {
    background: $color-bg-btn-primary;
  }
  .class_border {
    border-left: 1px solid #cdd2e6;
    border-right: 1px solid #cdd2e6;
  }
  .only-btn-arrow {
    border: none;
    padding: 5px;
  }
}
</style>
